<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select
            placeholder="选择门店"
            v-model="formInline.store_id"
            filterable
            @change="storeChange"
          >
            <el-option
              v-for="item in store_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="物品兑换仓" v-model="formInline.house_id" filterable>
            <el-option
              v-for="item in house_list"
              :key="item.house_id"
              :label="item.house_name"
              :value="item.house_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择类型" v-model="formInline.species" filterable>
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.accessories_id"
            placeholder="请输入物品编号/名称"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <vue-preview class="preview" :slides="scope.row.imgList"></vue-preview>
          </template>
        </el-table-column>
        <el-table-column align="center" label="物品名称" prop="name"></el-table-column>
        <el-table-column align="center" label="物品编号" prop="accessories_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="类别" prop="type_name"></el-table-column>
        <el-table-column
          align="center"
          label="销售价"
          prop="sale_money"
          v-if="list.length>0&&list[0].is_store_main==15"
        ></el-table-column>
        <el-table-column align="center" label="成本价" prop="money_cost"></el-table-column>
        <el-table-column align="center" label="库存量" prop="num"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  store,
  house,
  getList,
  getPage,
  get_goods_type,
} from "@/api/storage_control/pj_warehouse_manage";
export default {
  data() {
    return {
      type_list: null,
      listLoading: false,
      is_printer: false,
      currentPage: 1,
      totalDataNumber: 0,
      formInline: {
        species: "",
        store_id: "",
        house_id: "",
        accessories_id: "",
      },
      store_list: [],
      house_list: [],
      list: [],
      carList: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (!vm.type_list) {
        vm.getGoods();
        vm.getStore();
      }
    });
  },
  // created() {
  //     this.getStore();
  //     this.getGoods();
  // },
  methods: {
    getGoods() {
      get_goods_type({ category_id: this.$route.meta.id }).then((response) => {
        response.forEach((item) => {
          if (item.name == "配件类物品") {
            item.id = 1;
          } else if (item.name == "财务类物品") {
            item.id = 2;
          } else if (item.name == "其他类物品") {
            item.id = 3;
          }
        });
        this.type_list = response;
        this.formInline.species = response.length > 0 ? response[0].id : "";
      });
    },
    showCar() {
      this.$refs.printer.showCar();
    },
    addcar(row) {
      this.carList.push(row);
      this.$refs.printer.watch_in_car();
    },
    getStore() {
      store({ brand: this.formInline.brand, category_id: 302 }).then(
        (response) => {
          this.store_list = response;
          let data = response.filter(
            (res) => res.id == this.$store.getters.optionId
          );
          if (data.length > 0) {
            this.formInline.store_id = data[0].id;
          } else {
            if (this.store_list.length > 0) {
              this.formInline.store_id = this.store_list[0].id;
            }
          }
          this.getHouse();
        }
      );
    },
    storeChange() {
      this.getHouse();
    },
    getHouse() {
      this.formInline.house_id = "";
      house({ store_id: this.formInline.store_id, cang: 2 }).then(
        (response) => {
          this.house_list = response;
          this.formInline.house_id =
            response.length > 0 ? response[0].house_id : "";
        }
      );
    },
    houseChange() {
      this.is_printer = false;
      this.house_list.forEach((val, i) => {
        if (val.house_id == this.formInline.house_id) {
          if (val.is_store_main == 7) {
            this.is_printer = true;
          }
        }
      });
    },
    searchClick() {
      if (this.formInline.store_id) {
        this.fetchData();
      } else {
        this.$message({ type: "error", message: "请选择门店" });
      }
    },
    watch_in_car() {
      this.list.forEach(function (val1, i1) {
        val1.in_car = false;
        this.carList.forEach(function (val2, i2) {
          if (val1.accessories_id == val2.accessories_id) {
            val1.in_car = true;
          }
        }, this);
      }, this);
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response * 20;
          getList(this.formInline).then((response) => {
            response.forEach((val, i) => {
              val.car_accessories_num = "";
              val.money_cost = val.money_cost == null ? "" : val.money_cost;
              val.in_car = false;
              val.imgList = [
                {
                  src: val.img,
                  msrc: val.thumb,
                  w: 1200,
                  h: 900,
                },
              ];
            });
            this.list = response;
            this.listLoading = false;
            this.watch_in_car();
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        response.forEach((val, i) => {
          val.money_cost = val.money_cost == null ? "" : val.money_cost;
          val.in_car = false;
          val.imgList = [
            {
              src: val.img,
              msrc: val.thumb,
              w: 1200,
              h: 900,
            },
          ];
        });
        this.list = response;
        this.listLoading = false;
        this.watch_in_car();
      });
    },
  },
};
</script>